<template>
	<view class="">
		<view class="list">
			<view class="latest" v-for="(item,index) in email_list" :key="index"  @click="$toLink('../check/check',{})" >
				<view class="left" :id="index==0? 'con':''">{{item.circle}}</view>
				<view class="right">
					<view>
						<image :src="img_url" mode="widthFix"></image>
						<text>{{item.text}}</text>
					</view>
					<view class="">
						{{item.content}}
					</view>
					<view class="">
						<text>{{item.start_date}}</text>
						<text>{{item.detail_time}}</text>
					</view>
				</view>
			</view>
		</view>    
		<view class="notify_title"  @click="$toLink('../school_notification/school_notification',{})">
			<image src="../../../static/tupian85.png" mode="widthFix"></image>
			<text>{{notify_title}}</text>
			<image src="../../../static/tupian78.png" mode="widthFix"></image>
		</view>
		<view class="latest_notify">
			<view class="latest" v-for="(school_item,school_index) in latest_list" :key="school_index" @click="$toLink('../inform_detail/inform_detail',{})">
				<view class="left">
					<image :src="school_item.logo" mode="widthFix"></image>
					<text :id="[school_index==0? 'con':school_index==1? 'label':'']">{{school_item.circle}}</text>
				</view>
				<view class="right">
					<view>
						<text>{{school_item.text}}</text>
					</view>
					<view class="">
						{{school_item.content}}
					</view>
					<view class="">
						<text>{{school_item.start_date}}</text>
						<text>{{school_item.detail_time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notify_title: '最新通知',
				img_url: '../../static/tupian81.png',//子组件导入本地的图片需要和父组件引入本地图片路径一致，否则会报错（这是个bug）
				email_list: [{
						circle: 'ad',
						url: '../../../static/tupian81.png',
						text: '广告邮件',
						content: '根据教育局通知安排,元旦放假三天，与2020年12月...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					},
					{
						circle: '学',
						url: '../../../static/tupian81.png',
						text: '12347@rice.com.cn',
						content: '根据教育局通知安排,元旦放假三天，与2020年12月...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					}
				],
				latest_list: [{
						circle: '5',
						logo: '../../static/tupian82.png',
						text: '学校通知',
						content: '根据教育局通知安排,元旦放假三天，与2020年12月...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					},
					{
						circle: '5',
						logo: '../../static/tupian83.png',
						text: '班级通知',
						content: '周三下午英语课考试测试,同学们记得复习.',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					},
					{
						circle: '',
						logo: '../../static/tupian84.png',
						text: '年级通知',
						content: '周冬冬老师,以下是今天的上课安排,请尽快...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.list {
		width: 100%;
		background: #fff;


		.latest {
			width: 710rpx;
			margin-left: 20rpx;
			border-bottom: 1px solid #F2F2F2;
			display: flex;
			justify-content: flex-start;
			padding-bottom: 20rpx;

			.left {
				width: 62rpx;
				height: 62rpx;
				background: #13B5B1;
				border-radius: 50%;
				color: #fff;
				text-align: center;
				line-height: 62rpx;
				margin-top: 30rpx;
				margin-left: 13rpx;
			}

			#con {
				color: #333333;
				background: #F8C229;


			}

			.right {
				margin-top: 20rpx;
				margin-left: 20rpx;
				width: 600rpx;

				view {
					&:nth-child(1) {
						padding-top: 10rpx;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 24rpx;
							}
						}

						text {
							&:nth-child(2) {
								color: #333333;
								font-size: 28rpx;
								margin-left: 27rpx;
							}
						}

					}

					&:nth-child(2) {
						padding-top: 10rpx;
						width: 100%;
						color: #666666;
						font-size: 24rpx;
					}

					&:nth-child(3) {
						padding-top: 15rpx;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						text {
							color: #b7b7b7;
							font-size: 22rpx;

							&:nth-child(2) {
								margin-left: 27rpx;
							}
						}
					}
				}
			}

		}
	}

	.notify_title {
		width: 100%;
		height: 100rpx;
		background: #F2F2F2;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		image {
			&:nth-child(1) {
				width: 36rpx;
				margin-left: 20rpx;
			}

			&:nth-child(3) {
				width: 20rpx;
				margin-left: 500rpx;
			}
		}

		text {
			&:nth-child(2) {
				color: #666666;
				font-size: 30rpx;
				margin-left: 28rpx;
			}
		}
	}

	.latest_notify {
		width: 100%;
		background: #fff;
		// margin-bottom:var(--window-bottom);

		.latest {
			width: 710rpx;
			margin-left: 20rpx;
			border-bottom: 1px solid #F2F2F2;
			display: flex;
			justify-content: flex-start;
			padding-bottom: 20rpx;

			.left {
				width: 80rpx;
				height: 62rpx;
				position: relative;
				margin-top: 30rpx;
				margin-left: 13rpx;

				image {
					&:nth-child(1) {
						position: absolute;
						width: 70rpx;
						top: 0rpx;
						left: 8rpx;
						display: block !important;
					}
				}

				text {
					&:nth-child(2) {
						position: absolute;
						right: 13rpx;
						top: 0rpx;
						border-radius: 50%;
						background-color: #f00;
						color: #fff;
						width: 25rpx;
						height: 25rpx;
						text-align: center;
						line-height: 25rpx;
						font-size: 5rpx;
						display: none;
					}
				}

				#con {
					display: block;
					position: absolute;
					right: 2rpx;
					top: 0rpx;
					border-radius: 50%;
					background-color: #f00;
					color: #fff;
					width: 25rpx;
					height: 25rpx;
					text-align: center;
					line-height: 25rpx;
					font-size: 5rpx;
				}

				#label {
					position: absolute;
					right: 2rpx;
					top: 0rpx;
					border-radius: 50%;
					background-color: #f00;
					color: #fff;
					width: 25rpx;
					height: 25rpx;
					text-align: center;
					line-height: 25rpx;
					font-size: 5rpx;
					display: block;
				}
			}

			.right {
				margin-top: 20rpx;
				margin-left: 20rpx;
				width: 582rpx;

				view {
					&:nth-child(1) {
						padding-top: 10rpx;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						text {
							&:nth-child(1) {
								color: #333333;
								font-size: 28rpx;
							}
						}

					}

					&:nth-child(2) {
						padding-top: 10rpx;
						width: 100%;
						color: #666666;
						font-size: 24rpx;
					}

					&:nth-child(3) {
						padding-top: 15rpx;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						text {
							color: #b7b7b7;
							font-size: 22rpx;

							&:nth-child(2) {
								margin-left: 27rpx;
							}
						}
					}
				}
			}

		}
	}
</style>
